import React, { Fragment } from 'react';
import { Text } from '@vx/text';
import MyIcon from '@/components/MyIcon';
import TreeSvg from './TreeSvg';
import { hierarchy } from 'd3-hierarchy';
import IconButton from '@/components/IconButton';
import styles from './ServicePhase.less';

function ServicePhase({
  data,
  nodeClick,
  groupClick,
  routeGroupClick,
  nodeBorder,
  nodeKey,
  nodeFill,
  width,
  height,
  root,
  showAddNode,
}) {
  let state = {
    layout: 'cartesian',
    orientation: 'horizontal',
    linkType: 'diagonal',
    stepPercent: 0.5,
  };
  const rectWidth = 100;
  const rectheight = 100;

  let nodeBorderColor;
  if (typeof nodeBorder === 'function') {
    nodeBorderColor = nodeBorder(root.phaseType);
  }
  let nodeFillColor;
  if (typeof nodeFill === 'function') {
    nodeFillColor = nodeFill(root.phaseType);
  }
  const roots = data.map(item =>
    hierarchy(item, d => (d.serviceRelations ? d.serviceRelations : null))
  );
  function emitGroupType() {
    groupClick(root);
  }
  function emitGroupInfo() {
    routeGroupClick(root);
  }
  return (
    <Fragment>
      {data.length === 0 && (
        <>
          <rect
            height={rectheight}
            width={rectWidth}
            y={50}
            x={rectWidth / 2}
            fill={nodeFillColor}
            stroke={nodeBorderColor}
            strokeWidth={2}
            rx={8}
            onClick={emitGroupInfo}
          />
          <circle
            r={40}
            cx={rectWidth}
            cy={100}
            fill="#fff"
            onClick={emitGroupType}
            style={{
              cursor: 'pointer',
            }}
          />
          <foreignObject
            x={80}
            y={70}
            width={40}
            height={65}
            style={{ cursor: 'pointer' }}
            onClick={emitGroupType}
          >
            <body style={{ background: 'transparent' }}>
              <MyIcon style={{ fontSize: 40 }} type="iconoss---fuwuluyou-tianjia" />
              <span
                style={{ width: 40, display: 'inline-block', textAlign: 'center', fontSize: 12 }}
              >
                请添加
              </span>
            </body>
          </foreignObject>
        </>
      )}
      {data.length > 0 && (
        <>
          <rect
            height={100 + (data.length - 1) * 200}
            width={rectWidth}
            y={50}
            x={rectWidth / 2}
            fill={nodeFillColor}
            stroke={nodeBorderColor}
            strokeWidth={2}
            rx={8}
            onClick={emitGroupInfo}
            style={{ cursor: 'pointer' }}
            class="servicePhase"
          />
          <TreeSvg
            data={data}
            width={width}
            height={height}
            nodeKey={node => node.data.serviceName}
            nodeClick={nodeClick}
            children={d => (d.serviceRelations ? d.serviceRelations : null)}
          />
          {showAddNode === 1 ? (
            <foreignObject
              x={83}
              y={140 + (data.length - 1) * 200}
              width={32}
              height={32}
              style={{ cursor: 'pointer' }}
              className={styles.showAddNode}
            >
              <body style={{ borderRadius: '50%' }}>
                <IconButton
                  title="添加服务节点"
                  icon="iconoss---fuwuluyou-tianjia"
                  onClick={emitGroupType}
                  style={{
                    fontSize: 30,
                    background: '#fff',
                    borderRadius: '50%',
                    boxShadow: '0px 1px 3px 0px rgba(0,0,0,0.15)',
                  }}
                />
              </body>
            </foreignObject>
          ) : null}
        </>
      )}
    </Fragment>
  );
}

export default ServicePhase;
